<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>博客展示页面</title>
    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <!-- Bootstrap JS 依赖 -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/moment.js"></script>

</head>
<body>
<!-- 导航栏 -->
    <%@include file="public/header.jsp"%>
<!-- 博客内容区域 -->
<div class="container mt-5 pt-4">
    <div class="row">
        <!-- 文章内容 -->
        <div class="col-lg-8">
            <!-- 文章标题区 -->
            <div class="mb-4">
                <h1 class="display-4 font-weight-bold">${article.articleTitle}</h1>
                <div class="d-flex align-items-center mt-3">
                    <!-- <img src="https://via.placeholder.com/45" class="rounded-circle mr-2" alt="作者头像"> -->
                    <div>
                        <span class="font-weight-bold">${article.articleAuthor.username}</span>
                        <div class="d-flex text-muted">
                            <small id="articleCreateTime">${article.articleCreateTime}</small>
                            <!-- <small class="ml-3"><i class="far fa-clock mr-1"></i>阅读时间 8分钟</small> -->
                            <small class="ml-3"><i class="far fa-eye mr-1"></i>阅读量:${article.articleViewCount}</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 特色图片 -->
            <!-- <div class="card mb-4 border-0">
                <img class="card-img rounded" src="https://via.placeholder.com/800x400" alt="博客特色图片">
                <div class="card-img-overlay d-flex align-items-end justify-content-end">
                    <span class="badge badge-pill badge-success p-2">热门文章</span>
                </div>
            </div> -->

            <!-- 文章内容 -->
            <article class="mb-5">
                <!-- 内容 -->
                ${article.articleContent}
            </article>


            <!-- 评论区域 -->
            <div class="mb-5">
                <h3 class="mb-4">评论 <%--<span class="badge badge-pill badge-secondary">24</span>--%></h3>

                <!-- 评论表单 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title">发表评论</h5>
                        <form>
                            <div class="form-group">
                                <textarea class="form-control" rows="4" placeholder="写下您的评论..."></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">提交评论</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 搜索框 -->
            <!-- <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">搜索博客</h5>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="输入关键词...">
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </div>
            </div> -->

            <!-- 分类 -->
            <!-- <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">文章分类</h5>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <a href="#" class="text-dark">前端开发</a>
                            <span class="badge badge-primary badge-pill">42</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <a href="#" class="text-dark">JavaScript</a>
                            <span class="badge badge-primary badge-pill">35</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <a href="#" class="text-dark">CSS技巧</a>
                            <span class="badge badge-primary badge-pill">28</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <a href="#" class="text-dark">响应式设计</a>
                            <span class="badge badge-primary badge-pill">19</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <a href="#" class="text-dark">框架比较</a>
                            <span class="badge badge-primary badge-pill">15</span>
                        </li>
                    </ul>
                </div>
            </div> -->

            <!-- 热门文章 -->
            <%@include file="public/popularArticles.jsp"%>

            <!-- 标签云 -->
            <!-- <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">标签云</h5>
                    <div class="d-flex flex-wrap">
                        <a href="#" class="badge badge-light m-1 p-2">JavaScript</a>
                        <a href="#" class="badge badge-light m-1 p-2">CSS</a>
                        <a href="#" class="badge badge-light m-1 p-2">HTML5</a>
                        <a href="#" class="badge badge-light m-1 p-2">Bootstrap</a>
                        <a href="#" class="badge badge-light m-1 p-2">React</a>
                        <a href="#" class="badge badge-light m-1 p-2">Vue</a>
                        <a href="#" class="badge badge-light m-1 p-2">响应式</a>
                        <a href="#" class="badge badge-light m-1 p-2">前端框架</a>
                        <a href="#" class="badge badge-light m-1 p-2">Web开发</a>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</div>

<!-- 页脚 -->
<%@include file="public/footer.jsp"%>
</body>
<script>

    /*前端：日期格式化*/
    window.onload=function (){
        const createDate = $('#articleCreateTime').text();
        $('#articleCreateTime').text(formatDateTime(createDate));

        $('')
    };

    function formatDateTime(text){
        const dateFormatter = 'YYYY年MM月DD日';
        var formatDate = moment(text).format(dateFormatter);
        return formatDate;
    }
</script>
</html>
